import React from 'react'
import { Button, Input, Form, Toast, Modal } from 'antd-mobile'
import { doCheckPhoneApi } from '@/api/regist'
import { useHistory } from 'react-router-dom'

// 注册页第一步组件
export default function Step1() {
  const his = useHistory()
  const [form] = Form.useForm()
  // 点击下一步执行的方法
  const onSubmitFn = () => {
    const values = form.getFieldValue()
    if (/^1[3-9]\d{9}$/.test(values.tel)) {
      doCheckPhoneApi(values).then(res => {
        console.log('resstep1', res);
        if (res.data.code == 200) {
          // 表示请求成功
          Modal.confirm({
            content: `将向手机号${values.tel}发送短信验证码`,
            onConfirm: () => {
              // 点击确定 -- 跳转到step2
              his.push({
                pathname:'/regist/step2',
                state:{
                  tel:values.tel
                }
              })
            },
          })
        } else {
          // 请求失败的情况
          Toast.show({
            icon: 'fail',
            content: res.data.message,
          })
        }
      })
    } else {
      Toast.show({
        icon: 'fail',
        content: '手机号输入有误',
      })
    }
  }
  return (
    <div>
      <Form layout='horizontal'
        form={form}
        mode='card'>
        <Form.Item label='手机号' name='tel'>
          <Input placeholder='请输入手机号' />
        </Form.Item>
      </Form>
      <Button block type='submit' color='danger' size='large' style={{
        borderRadius: '30px',
        boxSizing: 'border-box'
      }}
        onClick={onSubmitFn}>下一步</Button>
    </div>
  )
}
